import React, { useEffect, useRef, useState } from 'react';
import { connect, history } from 'umi';
import { Alert, Button, Space, Tag, Modal, notification, Row, Col, Checkbox, Form, Card } from 'antd'
import TableDataBlock from '@/components/TableDataBlock';
import RoleSetForm from './components/CancelOrder';
import PopImgShow from '@/components/PopImgShow';
import SearchCondition from '@/components/SearchCondition';
import { uploadFile } from '@/utils/utils'
import { commission_percent, promoter_typeInfo, promoter_commission_typeInfo, cashWith_status } from '@/common/contact'
const PromoterList = (props) => {
    const { loading, dispatch, list, zm } = props;
    const { location } = history
    const { query } = location
    const { accessId, id } = query
    const childRef = useRef();
    const [form] = Form.useForm();
    const [visible, setVisible] = useState(false);
    const [params, setSearchParams] = useState({})
    const [selectedRow, setSelectedRow] = useState({
        selectedRowKeys: [],
        type: 'checked',
        preserveSelectedRowKeys: true,
        onChange: (val, selectedRows) => {
            setSelectedRow({
                ...selectedRow,
                selectedRowKeys: val,
                rowKeyList: selectedRows
            });
        },

    });

    useEffect(() => { handleCallback() }, [params])
    const btnExtra = [{
        text: '导出',
        onClick: () => {
            dispatch({
                type: 'promoter/fakeExportPromoterWithdraw',
                payload: { ...params },
                callback: (e) => {
                    const { url } = e
                    uploadFile(url)
                }
            });
        },
    },]
    // 搜索参数
    const searchItems = [
        {
            label: '推广员',
            name: 'promoterKeyword',
        },
        {
            label: '提现时间',
            type: 'rangePicker',
            name: 'createStartTime',
            end: 'createEndTime',
        },

        {
            label: '打款时间',
            type: 'rangePicker',
            name: 'payedStartTime',
            end: 'payedEndTime',
        },

        {
            label: '状态',
            name: 'status',
            type: "select",
            select: cashWith_status
        },

    ];

    const getColumns = [
        {
            title: '提现时间',

            dataIndex: 'createTime',
        },
        {
            title: '推广员名称',
            dataIndex: 'promoterName',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (e) => {
                return cashWith_status[e]
            }
        },

        {
            title: '申请佣金',
            dataIndex: 'applyCommission',
        },
        {
            title: '实际佣金',
            dataIndex: 'realCommission',
        },
        {
            title: '佣金类型',

            dataIndex: 'commissionType',
            render: (e) => {
                return promoter_commission_typeInfo[e]
            }
        },
        {
            title: '审核时间',
            dataIndex: 'checkTime',
        },
        {
            title: '审核备注',
            dataIndex: 'checkRemark',
        },

        {
            title: '打款时间',

            dataIndex: 'payedTime',
        },

        {
            title: '审核员工',

            dataIndex: 'checkAdminName',
        },
        {
            title: '打款员工',
            dataIndex: 'payedAdminName',
        },
        {
            title: '银行卡号',
            dataIndex: 'bankCard',

        },
        {
            title: '银行名称',
            dataIndex: 'bankName',

        },
        {
            title: '银行户名',
            dataIndex: 'bankAccount',

        },
    ];
    const handleCallback = () => {
        childRef.current.fetchGetData();
    };
    const handleSaveRole = (detail = {}) => {
        setVisible({
            show: true,
            detail,
        });
    };
    return (
        <Card title='提现记录'>
            <div >
                <Row gutter={[36, 12]}>
                    <Col span={24}>
                        <div style={{ background: '#f5f5f5', padding: 24 }}>
                            <SearchCondition
                                form={form}
                                handleSearch={(e) => {
                                    setSearchParams(e);
                                }}
                                btnExtra={btnExtra}
                                searchItems={searchItems}
                            ></SearchCondition>
                        </div>
                    </Col>

                    <Col span={24}>
                        <TableDataBlock
                            cRef={childRef}
                            loading={loading}
                            params={{ ...params, }}
                            firstFetch={false}
                            columns={getColumns}
                            rowKey={(record) => `${record.id}`}
                            dispatchType="promoter/fetchPromoterWithdraw"
                            {...list}
                        ></TableDataBlock>
                    </Col>

                </Row>
                <RoleSetForm
                    cleanSelect={() => {
                        setSelectedRow({
                            ...selectedRow,
                            selectedRowKeys: [],

                        })
                    }}
                    visible={visible}
                    onClose={() => setVisible(false)}
                    handleCallback={handleCallback}
                ></RoleSetForm>


            </div >
        </Card>

    );
};

export default connect(({ promoter, loading }) => ({
    list: promoter.promoterWithdrawList,
    loading: loading.effects['promoter/fetchPromoterWithdraw']
}))(PromoterList);
